import React, {useRef, useEffect, FC} from 'react';
import { Modal, Form, Input} from 'antd';

import {FormValuesType, SingleUserInfoType} from '../data';


interface ModalForUsersProps {
  info: SingleUserInfoType;
  isVisible: boolean;
  clickCancel: () => void;
  handleFinish: (values: FormValuesType) => void;
}

const CustomModalForUsers: FC<ModalForUsersProps> = (props) => {

  // 使用useRef(), 有一个const myRef
  const userInfoRef = useRef();

  const [form] = Form.useForm();

  const {info, clickCancel, handleFinish, isVisible} = props;

  const {name, email, create_time, status} = info;

  const needObj = {
    name,
    email,
    createTime: create_time,
    status
  };

  // console.log('生成的需要的数据', needObj)




  // 由于在react中，只能在dom渲染以后，才能给子组件传递数据，因此需要在componentDidUpdate阶段
  // 后面的数组是执行条件，表示只有当isVisible发生变化时，才执行这段代码
  useEffect(()=> {
    // 只能使用setFieldsValue来进行更新form表单的动态数据进行显示
    form.setFieldsValue(needObj);
  },[isVisible]);


  const onSubmitOk = () => {
    // 点击modal的确定按钮，收集表单数据
    form.submit();
  };



  const onFinishFailed = (errorInfo: any) => {
    console.log('失败了:', errorInfo);
  };



  return (
    <div>
      <Modal title="个人信息"
             visible={isVisible}
             onOk={onSubmitOk}
             onCancel={clickCancel}
             forceRender
      >
        <Form
          name="userInfoForm"
          form={form}
          onFinish={handleFinish}
          onFinishFailed={onFinishFailed}
        >
          <Form.Item
            label="姓名"
            name="name"
            rules={[{ required: true, message: '请输入姓名!' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="邮箱"
            name="email"
          >
            <Input />
          </Form.Item>


          <Form.Item
            label="创建时间"
            name="createTime"
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="状态"
            name="status"
          >
            <Input />
          </Form.Item>

        </Form>
      </Modal>
    </div>
  )
};



export default CustomModalForUsers;
